<template>

    <el-dialog title="订单详情" :visible.sync="dialogVisible" width="800px">
        <el-descriptions title="订单信息" :column="3" border>
            <el-descriptions-item label="订单编号">{{ order.orderNo }}</el-descriptions-item>
            <el-descriptions-item label="订单状态">
                <el-tag :type="order.status | statusFilter">
                    {{ order.status | statusText }}
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="消耗积分">{{ order.totalPoints }}</el-descriptions-item>

        </el-descriptions>
        <el-descriptions title="商品信息" :column="3" border>
            <el-descriptions-item label="商品ID">{{ order.goodsId }}</el-descriptions-item>
            <el-descriptions-item label="商品名称">{{ order.goods.name }}</el-descriptions-item>
            <el-descriptions-item label="兑换数量">{{ order.goodsNum }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="收货信息" :column="3" border>
            <el-descriptions-item label="收货人">{{ order.receiverName }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ order.receiverPhone }}</el-descriptions-item>
            <el-descriptions-item label="收货地址">{{ order.receiverAddress }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="物流信息" :column="3" border>
            <el-descriptions-item label="快递公司">{{ order.deliveryName || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="快递单号">{{ order.deliveryCode || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="发货时间">{{ order.deliveryTime || '暂无' }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="其它信息" :column="3" border>
            <el-descriptions-item label="创建时间">{{ order.createTime }}</el-descriptions-item>
            <el-descriptions-item label="备注">{{ order.remark || '暂无' }}</el-descriptions-item>
        </el-descriptions>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeHandler">关闭</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'OrderDetail',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        order: {
            type: Object,
            default: {}
        }
    },
    data () {
        return {
            // order: {
            //     orderNo: '',
            //     goods: {},
            //     receiverName: '',
            //     receiverPhone: '',
            //     receiverAddress: '',
            //     deliveryName: '',
            //     deliveryCode: '',
            //     remark: '',
            //     totalPoints: 0,
            //     status: 0,
            //     createTime: ''
            // }
        }
    },
    filters: {
        statusFilter (status) {
            const statusMap = {
                0: 'info',
                1: '',
                2: 'success',
                3: 'danger'
            }
            return statusMap[status]
        },
        statusText (status) {
            const statusTextMap = {
                0: '待处理',
                1: '已发货',
                2: '已完成',
                3: '已取消'
            }
            return statusTextMap[status]
        }
    },
    methods: {
        closeHandler () {
            this.$emit('close');
        }
    }
}
</script>